import React, { Component } from 'react'
import stylels from './swipercont.module.scss';
import { connect } from 'react-redux'
import {getSwiperShopp} from '../../../store/actionCreator/indexActionCreator'
import store from '../../../store'
import { Tabs } from 'antd-mobile';
import { withRouter } from 'react-router-dom'
 class swipercont extends Component {
     constructor(props){
         super(props)
     }
     componentDidMount(){
        store.dispatch(getSwiperShopp(1))
     }
    render() {
        
        return (
            <div style={{background:'#c7e5ff'}} >
                <div className={this.props.contxd?stylels.titleTxet:''}>
                        <div className={stylels.boxTaber}>
                                {
                                    this.props.contentTitle.map((v,i)=>{
                                        return (
                                        <div key={i} className={this.props.choice==i?stylels.xuanz:''}>
                                            <div  className={stylels.topNav}
                                                
                                                onClick={()=>{
                                                    // console.log(i)
                                                    store.dispatch(getSwiperShopp(v.id))
                                                    this.props.Transformation(i)
                                                }}
                                            >
                                                {v.title}
                                            </div>
                                        </div>)
                                    })
                                }
                        </div>
                 
                </div>
                <div className={stylels.shoppBox}>
                            {
                                this.props.contlist.map((v,i)=>{
                                    return <div className={stylels.shoppitme} key={v.item_id}
                                    onClick={() => {
                                        // console.log('跳转')
                                        // console.log()
                                        this.props.history.push('/details/1msvj44')
                                    }}
                                    >
                                        <div className={stylels.shoppImg}>
                
                                            <img src={v.image} alt=""/>
                                        </div>
                                        <div className={stylels.introduce}>
                                            <p className={stylels.titleText}>
                                                {v.title}
                                            </p>
                                            <div className={stylels.contentText}>
                                                <span className={stylels.hdjg}>活动价</span>
                                                <span className={stylels.itmePari}>￥{v.discountPrice}</span>
                                                <span className={stylels.itmeNopar}>￥{v.price}</span>
                                            </div>
                                            <div className={stylels.buttonBox}>
                                                立即购买
                                            </div>
                                        </div>
                                    </div>
                                })
                            }
                                
                            </div>
            </div>
        )
    }
}
const mapActionToProps = (defaulting)=>{
    return{
        leisureTime:(index)=>{
            // 点击休闲触发
            let action = {
                type:'LEISURES_TIME',
                payload:{
                    id:index
                }
            }
        },
        goDetails:()=>{
            let action = {
                type:'GO_DETAILS',
            }
        },
        Transformation:(index)=>{
            let action = {
                type:'TRANS_fOR',
                payload:{
                    id:index
                }
            } 
            defaulting(action)
        }
    }
}
const mapStateToProps = (state)=>{
    return {
        contentTitle:state.SwiperContReducer.contentTitle,
        contlist:state.SwiperContReducer.contList,
        num:state.SwiperContReducer.num,
        choice:state.SwiperContReducer.choice
    }
}
export default connect(mapStateToProps,mapActionToProps)(withRouter(swipercont))